import React from 'react'

// 导入封装的顶部搜索栏组件
import SearchHeader from '../../components/SearchHeader/index.jsx'
// 导入 Filter 组件
import Filter from './components/Filter'

// 导入 Flex 组件
import { Flex, Toast } from 'antd-mobile'
// 导入封装的 HouseItem 组件
import HouseItem from '../../components/HouseItem/index.jsx'
import { List, AutoSizer, WindowScroller, InfiniteLoader } from 'react-virtualized'
// 导入没有房源信息时候的提示
import NoHouse from '../../components/NoHouse/index.js'

// 导入封装的 API 请求方法
import { API } from '../../utils/api'
import { BASE_URL } from '../../utils/url.js'

// 导入获取城市信息的方法
import { getCurrentCityName } from '../../utils/getCityName.js'

// 导入 css 文件
import styles from './index.module.css'

// 获取本地存储的城市信息
const { label } = JSON.parse(localStorage.getItem('hkzf_city'))

export default class HouseList extends React.Component {
  state = {
    list: [], // 列表数据
    count: 0, // 房源数据总条数
    isLoading: false, // 代表数据是否正在请求中
    cityName: '' // 当前城市的名字
  }

  async componentDidMount() {
    const { label } = await getCurrentCityName()

    this.setState({
      cityName: label
    })

    // 进入找房页面的时候，获取房源列表数据
    this.searchHouseList()
  }

  // 给当前组件添加一个静态属性实例属性
  filters = {}

  // 获取 Filter 组件传递的数据
  onFilter = (value) => {
    // 接收到子组件传递的筛选条件，挂载到 this 上
    this.filters = value

    window.scrollTo(0, 0)

    this.searchHouseList()
  }

  // 获取房源列表的数据
  searchHouseList = async () => {
    // 获取当前城市的 ID
    const { value } = JSON.parse(localStorage.getItem('hkzf_city'))

    this.setState({
      isLoading: true
    })

    Toast.loading('加载中……')

    // 再次处理请求参数
    const params = {
      cityId: value,
      ...this.filters,
      start: 1,
      end: 10
    }

    // 发起筛选请求
    const { data: res } = await API.get('/houses', { params })

    if (res.status !== 200) return

    Toast.hide()

    this.setState({
      list: res.body.list,
      count: res.body.count,
      isLoading: false
    })

    if (this.state.count !== 0) {
      Toast.info(`共找到${this.state.count}套房源`, 2, null, false)
    }
  }

  renderHoustList = ({
    key,
    index,
    style
  }) => {
    const { list } = this.state
    // 根据索引获取到每一项的数据
    const item = list[index]

    if (!item) {
      return (
        <div key={key} style={style}>
          <p className={styles.loading}></p>
        </div>
      )
    }

    return (
      <HouseItem
        onClick={ () => this.props.history.push(`/detail/${item.houseCode}`) }
        style={style}
        key={key}
        houseImg={BASE_URL + item.houseImg}
        title={item.title}
        desc={item.desc}
        tags={item.tags}
        price={item.price} />
    )
  }

  // 渲染房源列表
  renderList = () => {
    const { count, isLoading } = this.state

    if (count === 0 && !isLoading) {
      return <NoHouse>没有找到房源，请您换个搜索条件吧~</NoHouse>
    }

    return (
      <InfiniteLoader
        isRowLoaded={this.isRowLoaded}
        loadMoreRows={this.loadMoreRows}
        rowCount={this.state.count}
      >
        {({ onRowsRendered, registerChild }) => (
          <WindowScroller>
            {
              // height：视口高度
              // isScrolling：表示是否滚动中，用来覆盖List组件自身的滚动状态
              // scrollTop：页面滚动的距离，用来同步 List 组件的滚动距离
              ({ height, isScrolling, scrollTop }) => (
                <AutoSizer>
                  {
                    ({ width }) => (
                      <List
                        onRowsRendered={onRowsRendered}
                        ref={registerChild}
                        autoHeight
                        width={width}
                        height={height}
                        rowCount={this.state.count}
                        rowHeight={120}
                        isScrolling={isScrolling}
                        scrollTop={scrollTop}
                        rowRenderer={this.renderHoustList} />
                    )
                  }
                </AutoSizer>
              )
            }
          </WindowScroller>
        )}
      </InfiniteLoader>
    )
  }

  // 判断表示每一行数据是否加载完成
  isRowLoaded = ({ index }) => {
    return !!this.state.list[index]
  }

  // 加载更多数据的方法，在需要加载更多数据时，会调用该方法
  // startIndex -- 起始索引
  // stopIndex -- 结束索引
  loadMoreRows = async ({ startIndex, stopIndex }) => {
    // 获取当前城市的 ID
    const { value } = JSON.parse(localStorage.getItem('hkzf_city'))

    // 再次处理请求参数
    const params = {
      cityId: value,
      ...this.filters,
      start: startIndex,
      end: stopIndex
    }

    // 发起筛选请求
    const { data: res } = await API.get('/houses', { params })

    if (res.status !== 200) return

    this.setState({
      list: [...this.state.list, ...res.body.list]
    })
  }

  render() {
    return (
      <div className="house_list">
        <div className={styles.sticky}>
          <Flex className={styles.header}>
            {/* 顶部搜索栏组件 */}
            <i className="iconfont icon-back" onClick={() => this.props.history.go(-1)} />
            <SearchHeader currentCityName={this.state.cityName} className={styles.searchHeader}></SearchHeader>
          </Flex>

          {/* 条件筛选栏组件 */}
          <Filter onFilter={this.onFilter}></Filter>
        </div>

        {/* 房源列表结构 */}
        <div className={styles.houseItems}>
          {this.renderList()}
        </div>
      </div>
    )
  }
}
